<template>
  <div class="main-con flex1 vbox">
    <div class="search-con">
      <el-form :model="searchParam" :inline="true" label-width="105px">
        <el-form-item label prop="name">
          <el-input
            v-model.trim="searchParam.name"
            @keyup.enter.native="search"
            placeholder="输入目的港名称查询"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="toolbar">
      <el-button icon="el-icon-plus" type="primary" @click="addService">新增目的港</el-button>
    </div>
    <div class="vbox flex1">
      <base-table
        ref="destinationTable"
        url="destination/getPage"
        code="htk"
        :selection="false"
        :param="searchParam"
        :cls="columns"
        :optionBtns="optionBtns"
        @handlerOption="handlerOption"
        :option-width="205"
      ></base-table>
    </div>
    <el-dialog center title="新增/编辑目的港" :visible.sync="showAddDialog" width="28%">
      <el-form ref="destForm" :rules="rules" :model="dest" label-width="100px">
        <el-form-item label="目的港名称" prop="name">
          <el-input v-model="dest.name" placeholder="请输入目的港名称"></el-input>
        </el-form-item>
        <el-form-item label="清关公司" prop="serviceProviderId">
          <el-select style="width:100%" v-model="dest.serviceProviderId" placeholder="请选择清关公司">
            <el-option v-for="p in providers" :key="p.id" :label="p.name" :value="p.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="manager">
          <el-input v-model="dest.manager" placeholder="请输入负责人名称"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="dest.phone" placeholder="请输入目的港联系电话"></el-input>
        </el-form-item>
        <el-form-item label="归属地国家" prop="country">
          <base-select
            type="custom"
            code="htk-admin"
            v-model.trim="dest.country"
            url="country/selectCountries"
            placeholder="请选择目的港归属地国家"
          ></base-select>
          <!-- <el-input v-model="dest.country" placeholder="请输入目的港归属地国家"></el-input> -->
        </el-form-item>
        <el-form-item label="目的港公司" prop="company">
          <el-input v-model="dest.company" placeholder="请输入目的港公司"></el-input>
        </el-form-item>
        <el-form-item label="州" prop="province">
          <el-input v-model="dest.province" placeholder="请输入州"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="dest.city" placeholder="请输入城市"></el-input>
        </el-form-item>
        <el-form-item label="邮编" prop="zip">
          <el-input v-model="dest.zip" placeholder="请输入目的港邮编"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" prop="address">
          <el-input type="textarea" :rows="5" v-model="dest.address" placeholder="请输入联系地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveDest">保存</el-button>
        <el-button @click="showAddDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let me = this;
    return {
      showAddDialog: false,
      searchParam: {
        type: "",
        name: ""
      },
      dest: {},
      rules: {
        name: [
          {
            required: true,
            message: "请输入目的港名称",
            trigger: ["change", "blur"]
          }
        ],
        serviceProviderId: [
          {
            required: true,
            message: "请选择清关公司",
            trigger: ["change", "blur"]
          }
        ]
      },
      columns: [
        {
          prop: "name",
          label: "目的港名称",
          width: 200
        },
        {
          prop: "serviceProvider",
          label: "清关公司"
        },
        {
          prop: "manager",
          label: "负责人"
        },
        {
          prop: "manager",
          label: "联系电话"
        },
        {
          prop: "address",
          label: "联系地址"
        },
        {
          prop: "country",
          label: "归属地国家"
        },
        {
          prop: "postcode",
          label: "邮编"
        }
      ],
      optionBtns: [
        { text: "编辑", code: "list_edit", type: "primary" },
        { text: "删除", code: "list_delete" }
      ],
      providers: []
    };
  },
  created() {
    this.getServiceProviders();
  },
  mounted() {
    this.defaultProvider = JSON.parse(JSON.stringify(this.$data.dest));
  },
  methods: {
    search() {
      this.$refs["destinationTable"].initLoad();
    },
    getServiceProviders() {
      let me = this;
      me.$http.ajax({
        url: "serviceprovider/listByType/4",
        code: "htk",
        success: res => {
          me.providers = res;
        }
      });
    },
    handlerOption(code, row) {
      if (code == "list_edit") {
        this.editService(row);
      } else if (code == "list_delete") {
        this.deleteService(row);
      }
    },
    deleteService(row) {
      let me = this;
      me.$confirm("确定要删除选中行吗？", "删除提示")
        .then(res => {
          me.$http.ajax({
            url: "destination/batchDelete/" + row.id,
            code: "htk",
            success: res => {
              me.$message.success("删除成功");
              me.search();
            }
          });
        })
        .catch(() => {});
    },
    addService() {
      this.showAddDialog = true;
      this.$nextTick(() => {
        this.$refs["destForm"].resetFields();
        this.dest = Object.assign({}, this.defaultProvider);
      });
    },
    editService(row) {
      this.showAddDialog = true;
      this.$nextTick(() => {
        this.$refs["destForm"].resetFields();
        let tempData = Object.assign({}, row);
        this.dest = tempData;
      });
    },
    saveDest() {
      let me = this;
      me.$refs.destForm.validate(valid => {
        if (!valid) {
          return false;
        }
        me.$http.ajax({
          url: "destination/saveDestination",
          code: "htk",
          data: me.dest,
          success: res => {
            me.$message.success("保存成功");
            me.search();
            me.showAddDialog = false;
          }
        });
      });
    }
  }
};
</script>

<style >
</style>
